<template>
  <div id="zb_app">
    <!-- 卡片视图区域 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index/home' }">后台首页</el-breadcrumb-item>
        <span>创建商品</span>
        <router-link :to="{name:'/goods_new1'}">
          <el-button size="mini" class="zb_router">回到商品列表</el-button>
        </router-link>
      </el-breadcrumb>
      <!-- form表单 -->
      <el-form style="margin-top:10px;">
        <!-- 商品名称 -->
        <el-form-item label="商品名称">
          <el-input v-model="edits.title" placeholder="请输入商品名称，不能超过60个字符" class="w-50"></el-input>
        </el-form-item>
        <!-- 封面 -->
        <el-form-item label="封面">
          <el-button icon="el-icon-plus" @click="sel_img = true" v-if="edits.cover=='' "></el-button>
          <el-image
            :src="edits.cover"
            v-else
            style="width:100px; height:100px; border-radius: 5px;"
            @click="sel_img=true"
          ></el-image>
        </el-form-item>
        <!-- 商品分类 -->
        <el-form-item label="商品分类">
          <el-select v-model="edits.category_id" placeholder="请选择商品分类">
            <el-option v-for="(item,index) in cates" :key="index" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 商品描述 -->
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            v-model="edits.desc"
            placeholder="选填，商品卖点简述，例如：此款商品美观大方 性价比较高 不容错过"
            class="w-50"
          ></el-input>
        </el-form-item>
        <!-- 商品单位 -->
        <el-form-item label="商品单位">
          <el-input v-model="edits.unit" placeholder="请输入商品单位" class="w-50"></el-input>
        </el-form-item>
        <!-- 总库存 -->
        <el-form-item label="总库存">
          <el-input type="number" v-model="edits.stock" class="w-25">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <!-- 库存预警 -->
        <el-form-item label="库存预警">
          <el-input type="number" v-model="edits.min_stock" class="w-25">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <!-- 最低销售价 -->
        <el-form-item label="最低销售价">
          <el-input type="number" v-model="edits.min_price" class="w-25">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <!-- 最低原件 -->
        <el-form-item label="最低原价">
          <el-input type="number" v-model="edits.min_oprice" class="w-25">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <!-- 库存显示 -->
        <el-form-item label="库存显示">
          <el-radio-group v-model="edits.stock_display">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 是否上架 -->
        <el-form-item label="是否上架">
          <el-radio-group v-model="edits.status">
            <el-radio :label="0" border>放入仓库</el-radio>
            <el-radio :label="1" border>立即上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 运费模板 -->
        <el-form-item label="运费模板">
          <el-select v-model="edits.express_id" placeholder="请选择运费模板">
            <el-option
              :label="item.name"
              v-for="(item,index) in express"
              :key="index"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        style="position: fixed;bottom: 50px;right: 50px;"
        @click="zb_submit"
      >提交</el-button>
    </el-card>
    <!-- 添加用户选择头像的弹框 -->
    <el-dialog title="选择头像" :visible.sync="sel_img" width="80%" @open="getImageClass">
      <el-container>
        <el-aside style="width:200px">
          <ul>
            <li
              v-for="(item,key) in zb_imageClass"
              :key="key"
              :class="{act:item.id==cid}"
              @click.left="changeLeft(item.id)"
            >
              <span>{{item.name}}</span>
              <span>{{item.images_count}}</span>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <!-- 右侧图片区域 -->
          <ul class="zb_ul">
            <li v-for="(item,key) in zb_imgList" :key="key">
              <el-image :src="item.url" @click="zb_selectImg(item.url)" />
              <p>{{item.name}}</p>
            </li>
          </ul>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      cates: [], //商品分类数据源
      express: [], //运费模板数据源
      sel_img: false, //选择头像的弹框
      zb_imageClass: [], //侧边俩 相册分类 数据源
      zb_imgList: [], //图片列表数据
      cid: "", //相册分类的id
      edits: {
        id: "", //id
        title: "", //商品名称
        cover: "", //封面
        category_id: "", //商品分类id
        desc: "", //商品描述
        unit: "", //商品单位
        stock: "", //总库存
        min_stock: "", //库存预警
        ischeck: 0, //
        status: 0, //是否上架
        stock_display: 0, //库存显示
        express_id: "", //运费模板
        min_price: "", //最低销售价
        min_oprice: "" //最低原价
      }
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //获取图片相册列表
    getImageClass(flag = false) {
      this.$axios.get(`/admin/imageclass/1`).then(res => {
        console.log(res);
        this.zb_imageClass = res.data.data.list;
        this.cid = res.data.data.list[0].id;
        this.getImgList();
      });
    },
    //获取左侧图片数据
    getImgList() {
      this.$axios.get(`/admin/imageclass/${this.cid}/image/1`).then(res => {
        console.log(res);
        this.zb_imgList = res.data.data.list;
      });
    },
    //点击左侧菜单栏进行切换
    changeLeft(id) {
      this.cid = id; //改变id的值
      this.page = 1; //默认首页
      this.getImgList();
    },
    //选择头像的信息
    zb_selectImg(url) {
      //选择头像 赋值
      console.log(url);
      this.edits.cover = url;
      //关闭弹框
      this.sel_img = false;
    },
    //提交修改
    zb_submit() {
      let url = this.edits.id ? "/admin/goods/" + this.edits.id : "/admin/goods";
      this.$axios
        .post(url, this.edits, {
          token: true
        })
        .then(res => {
          this.$message({
            type: "success",
            message: this.edits.id ? "修改成功" : "发布成功"
          });
          this.$router.push({
            name: "/goods_new1"
          });
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    //获取分类数据源
    this.$axios
      .get("/admin/goods/create", {
        token: true
      })
      .then(res => {
        console.log(res);
        this.cates = res.data.data.cates;
        this.express = res.data.data.express.list;
      });
  },
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    this.getImageClass();
    let item = this.$route.params.id;
    // console.log(item);
    this.edits = item; //赋值
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
.zb_router {
  position: relative;
  left: 40px;
}
.el-breadcrumb {
  width: 100%;
  height: 40px;
  line-height: 30px;
  border-bottom: 1px solid #999999;
}
//图片
.zb_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
//图片区域
.zb_ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 30%;
    height: 250px;
    .el-image {
      width: 200px;
      height: 180px;
      border-radius: 5px;
    }
    .button {
      position: relative;
      bottom: 20px;
    }
  }
}
// 侧边栏
.el-aside {
  min-height: 500px;
  // overflow: scroll;
  background: #f0f0f0;
  overflow: auto;
  //导航栏
  ul {
    width: 100%;
    li {
      padding: 10px 8px;
      border-bottom: 1px solid #dddddd;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
    li.act {
      background: #f0f9eb;
      color: #67c23a;
    }
  }
}
</style>
